<template>
    <div class="blog-home__slogan-content" style="padding-top: 50px;border-bottom: 1px solid #e9e7e2">
        <h3>Navigation</h3>
    </div>

    <div class="row" style="margin-top: 100px">
        <div class="col-sm-12 col-md-4 col-lg-2"  v-for="nav in navs">
            <div class="service-two__card">
                <div class="service-two__card-content">
                    <div class="service-two__card-icon">
                        <i :class="'fa fa-' + nav.icon"></i>
                    </div>
                    <h3> {{nav.name}} </h3>
                </div>
            </div>
        </div>
    </div>


</template>

<script>
    export default {
        name: "navigation",
        data() {
            return {
                navs: {
                    search: {
                        name: "Search",
                        icon: "search",
                        href: ""
                    },
                    germplasm: {
                        name: "Germplasm",
                        icon: "seedling",
                        href: ""
                    },
                    geo: {
                        name: "Geographical",
                        icon: "search-location",
                        href: ""
                    },
                    tree: {
                        name: "Tree",
                        icon: "tree",
                        href: ""
                    },
                    news: {
                        name: "News",
                        icon: "newspaper",
                        href: ""
                    },
                    about: {
                        name: "About",
                        icon: "book-reader",
                        href: ""
                    }
                }
            }
        }
    }
</script>

<style scoped>

</style>